<!-- 研究院导航栏 -->
<template>
    <nav>
        <div class="cp-container">
            <div v-for="(item, index) in navList" :key="index" class="nav-item">
                <span v-if="!item.node" class="nav-titile" :class="{active: isActive(item)}">
                    <nuxt-link v-if="item.route" :to="item.route">{{item.name}}</nuxt-link>
                    <span v-else>{{item.name}}</span>
                </span>
                <el-dropdown v-else placement="bottom">
                    <span class="nav-titile" :class="{active: isActive(item)}">
                        <nuxt-link v-if="item.route" class="nav-titile" :to="item.route">{{item.name}}</nuxt-link>
                        <span v-else>{{item.name}}</span>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <div class="nav-lis">
                            <nuxt-link v-for="(ite, ind) in item.node" :key="ind" :to="parseRoute(ite)" :class="{active: $route.path === parseRoute(ite)}">
                                {{ite.name}}
                            </nuxt-link>
                        </div>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </nav>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import {navList, parseRoute, parseRouteKey} from '~/method/institute'
@Component({})
export default class InstituteNav extends Vue {
    navList: any = navList
    routeKey: any = parseRouteKey(this.$store)
    parseRoute (item: any) {
        return parseRoute(item)
    }
    isActive (item: any) {
        let flag = false
        const info = this.routeKey[this.$route.path]
        if (info) {
            flag = item.sign === info.s
        }
        return flag
    }
}
</script>

<style lang="scss">
    .nav-item {
        float: left;
        margin-left: 46px;
        line-height: 24px;
        padding: 10px 0;
        &:first-child {
            margin-left: 0;
        }
        .nav-titile {
            a,
            span{
                font-size: 16px;
                color: $black;
                &:hover {
                    color: $blue;
                }
            }
            &.active{
                a, span {
                    color: $blue;
                }
            }
        }
    }
    .nav-lis {
        padding: 5px 20px;
        a {
            font-size: 14px;
            color: $black;
            line-height: 32px;
            margin-right: 20px;
            display: block;
            &:last-child {
                margin-right: 0;
            }
            &.active,
            &:hover {
                color: $blue;
            }
        }
    }
</style>
